<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>添加模组</title>
    <link href="/favicon.png" rel="icon">
    <link href="../../css/common.css" rel="stylesheet">
    <link href="../../css/header.css" rel="stylesheet">
    <link href="../../css/footer.css" rel="stylesheet">
    <link href="css/addmod.css" rel="stylesheet">
    <script src="/js/jquery-3.7.1.js"></script>

    <!-- 自定义样式 -->
    <style>
        /* 路径导航 */
        #path-box {
            width: 100%;
            padding: 10px;
            border-radius: 3px;
            box-sizing: border-box;
            background-color: #f0f0f0;
            border: #b3bdc1 1px solid;
            margin-bottom: 15px;
        }
        #path-box img {
            height: 24px;
            vertical-align: middle;
            margin-right: 5px;
        }
        #path-box a {
            color: #333;
            text-decoration: none;
        }

        /* 编辑页面整体布局 */
        .edit-page {
            display: flex;
            gap: 20px;
            padding: 0 15px;
        }

        /* 左侧边栏 */
        .edit-sidebar {
            width: 260px;
            background-color: #f9f9f9;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            padding: 15px;
        }
        .sidebar-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
            padding-left: 5px;
            border-left: 3px solid #007bff;
        }
        .sidebar-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .sidebar-list li {
            margin: 8px 0;
            line-height: 1.6;
        }
        .sidebar-list a {
            color: #495057;
            text-decoration: none;
        }
        .sidebar-list a:hover {
            color: #007bff;
            text-decoration: underline;
        }

        /* 撞车提醒模块 */
        .crash-reminder {
            margin-top: 20px;
            border-top: 1px solid #e5e5e5;
            padding-top: 15px;
        }
        .crash-reminder p {
            color: #ff4d4f;
            margin-bottom: 5px;
        }
        .crash-reminder ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .crash-reminder li {
            color: #dc3545;
            margin: 3px 0;
        }

        /* 完成添加模块 */
        .submit-section {
            margin-top: 20px;
            border-top: 1px solid #e5e5e5;
            padding-top: 15px;
        }
        .submit-section p {
            margin-bottom: 5px;
        }
        .submit-section input[type="text"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            box-sizing: border-box;
            margin-bottom: 10px;
        }
        .captcha-box {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .captcha-box img {
            width: 80px;
            height: 34px;
        }
        .submit-btn {
            background-color: #28a745;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .submit-btn:hover {
            background-color: #218838;
        }

        /* 右侧主编辑区 */
        .edit-main {
            flex: 1;
            background-color: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            padding: 20px;
        }

        /* 选项卡 */
        .tab-nav {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0 0 20px 0;
            border-bottom: 1px solid #e5e5e5;
        }
        .tab-nav li {
            padding: 10px 20px;
            margin-right: 10px;
            cursor: pointer;
            border: 1px solid #e5e5e5;
            border-bottom: none;
            border-radius: 4px 4px 0 0;
            background-color: #f8f9fa;
        }
        .tab-nav li.active {
            background-color: #fff;
            border-color: #e5e5e5 #e5e5e5 #fff #e5e5e5;
        }

        /* 编辑器 */
        .editor-toolbar {
            background-color: #f8f9fa;
            border: 1px solid #e5e5e5;
            padding: 10px;
            border-radius: 4px 4px 0 0;
        }
        .editor-toolbar button {
            margin-right: 5px;
            padding: 5px 10px;
            border: 1px solid #ccc;
            background-color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }
        .editor-content {
            width: 100%;
            height: 200px;
            border: 1px solid #e5e5e5;
            border-top: none;
            border-radius: 0 0 4px 4px;
            padding: 10px;
            resize: vertical;
            box-sizing: border-box;
        }

        /* 提示文本 */
        .notice {
            color: #666;
            margin-bottom: 15px;
            font-size: 14px;
        }

        /* 新增：表单盒子组件 */
        .form-box {
            background-color: #f9f9f9;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 20px;
        }
        .form-row {
            margin-bottom: 15px;
        }
        .form-row label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #333;
        }
        .form-row input,
        .form-row select,
        .form-row textarea {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .form-row textarea {
            min-height: 100px;
            resize: vertical;
        }
        .form-hint {
            color: #666;
            font-size: 12px;
            margin-top: 5px;
        }
        .form-actions {
            text-align: right;
            margin-top: 20px;
        }
        .form-actions button {
            padding: 8px 20px;
            margin-left: 10px;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn-cancel {
            background-color: #fff;
            border: 1px solid #ccc;
        }
        .btn-confirm {
            background-color: #007bff;
            color: #fff;
            border: none;
        }

        /* 预览盒子 */
        .preview-box {
            background-color: #f9f9f9;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            padding: 15px;
            margin-top: 20px;
        }
        .preview-title {
            font-weight: bold;
            margin-bottom: 10px;
            padding-bottom: 5px;
            border-bottom: 1px solid #e5e5e5;
        }
    </style>
</head>
<body>
<!-- 头部 -->
<header id="header">
    <script>$("#header").load('../publicPage/header.html')</script>
</header>

<!-- 路径导航 -->
<div id="path-box">
    <img src="img/house.png" alt="首页图标">&gt;
    <a href="">添加模组</a>
</div>

<!-- 内容区 -->
<section id="section">
    <div class="edit-page">
        <!-- 左侧编辑帮助栏 -->
        <div class="edit-sidebar">
            <!-- 编辑帮助模块 -->
            <div class="sidebar-title">编辑帮助</div>
            <ul class="sidebar-list">
                <li>欢迎加入MC百科编辑讨论群交流编辑问题、提交GUI~</li>
                <li><a href="https://jq.qq.com/?_wv=1027&k=1137659736" target="_blank">加入编辑讨论群 (1137659736)</a></li>
                <li>MC百科编审部提醒您：</li>
                <li>玩法千万条，严谨第一条。</li>
                <li>编辑不规范，玩家两行泪。</li>
                <li><a href="#">编辑规范：《主站编辑规范》</a></li>
                <li><a href="#">模组收录规则：《模组(Mod)收录规则》</a></li>
                <li><a href="#">命名规则：《主站通用命名规则》</a></li>
                <li><a href="#">模组元素：《模组元素定义与优先级》</a></li>
                <li><a href="#">模组关系：《模组关系的定义》</a></li>
                <li><a href="#">批量导入：《如何批量添加资料》</a></li>
                <li>申请相关：</li>
                <li><a href="#">合并/综合功能介绍与申请</a></li>
                <li><a href="#">资料删除/重定向/融合申请</a></li>
                <li>Alt + X：自动链接</li>
                <li>Ctrl + Enter：快速提交</li>
                <li>小技巧：选中文本后拖动可实现保留格式移动，按住CTRL拖动可保留格式复制。</li>
            </ul>

            <!-- 撞车提醒模块 -->
            <div class="crash-reminder">
                <p>🚗 提醒撞车小助手</p>
                <p>当前已提交的待审模组：</p>
                <ul>
                    <li>暗无天日 (No Sun)</li>
                    <li>不止电池 / 电力镜景 (nbbattery)</li>
                    <li>Hunger Overflow</li>
                    <li>inside the system</li>
                    <li>矿石菌种社区版 (OreSpawn Community Edition)</li>
                    <li>Shorwing Shovels</li>
                    <li>Opposing Force</li>
                    <li>Better Questing - Immersive Engineering Multiblock Forming</li>
                    <li>BloodyQuests (BetterQuesting|Blood Magic Bridge)</li>
                    <li>Better Trial Chambers</li>
                    <li>TNT Arrow</li>
                    <li>幻形者诅咒 (Shape Shifter Curse)</li>
                    <li>硫 (Fluidium)</li>
                    <li>Confluence: Otherworld Gun Fix</li>
                    <li>方块放置阻止/御用挡置 (BlockBlocker)</li>
                    <li>娜拉工艺 (Koniavacraft)</li>
                    <li>加载界面动画 (Mojangster)</li>
                    <li>Camouflaged doors</li>
                    <li>FIX MY PINGGGGG</li>
                    <li>Better AE2</li>
                    <li>Araxer's Bestiary</li>
                    <li>Gaze</li>
                    <li>Spore inquisition</li>
                    <li>自定义村民交易 (Custom Trades Mod)</li>
                    <li>Hopper The Hedgehog</li>
                    <li>Health Indicator TXF</li>
                    <li>VolumeScroll</li>
                    <li>Adorable Hamster Pets</li>
                    <li>Crawl on Demand</li>
                    <li>Decorative Relics Stands</li>
                    <li>More Relics</li>
                    <li>Talk Balloons</li>
                    <li>Affix</li>
                    <li>CreeperHost Presents Steve's Carts</li>
                    <li>croaker</li>
                    <li>Qa村调整 (Qa Villager Tweaks)</li>
                    <li>Better Cave Update</li>
                    <li>Silent Gear Metalworks</li>
                    <li>MI Tweaks</li>
                    <li>Tree Tap</li>
                    <li>Minecraft Cursor</li>
                    <li>Multiblocked Extended Compatibility</li>
                </ul>
            </div>

            <!-- 完成添加模块 -->
            <div class="submit-section">
                <p>✔️ 完成添加</p>
                <p>改动附言：</p>
                <input type="text" placeholder="改动附言...">
                <p>请填写改动附言，用于给审核留下信息，只有审核员会看到。</p>

                <div class="captcha-box">
                    <p>验证码：</p>
                    <img src="captcha.png" alt="验证码">
                    <input type="text" placeholder="验证码...">
                </div>

                <p>参与活动：</p>
                <select>
                    <option>未参与活动</option>
                    <option>活动A</option>
                    <option>活动B</option>
                </select>
                <p>*选择前请先确认该模组已经参与了指定的活动。</p>

                <button class="submit-btn">添加模组</button>
            </div>
        </div>

        <!-- 右侧主编辑区 -->
        <div class="edit-main">
            <!-- 选项卡 -->
            <ul class="tab-nav">
                <li class="active" data-tab="basic">基本信息</li>
                <li data-tab="extend">扩展信息</li>
                <li data-tab="official">官方信息</li>
            </ul>

            <!-- 基本信息 tab -->
            <div class="tab-content basic active">
                <p class="notice">每个模组都需要有的基本信息，是构成模组介绍的基础。</p>

                <!-- 新增：表单盒子 -->
                <div class="form-box">
                    <div class="form-row">
                        <label>模组名称 *</label>
                        <input type="text" placeholder="请输入模组的正式名称（中英文）">
                        <div class="form-hint">
                            命名规则：需使用模组的正式名称，优先使用作者指定的中文译名，无官方译名时可自行翻译并备注原文。
                        </div>
                    </div>

                    <div class="form-row">
                        <label>英文名称</label>
                        <input type="text" placeholder="请输入模组的英文名称（如有）">
                        <div class="form-hint">
                            例如："Industrial Craft 2" 对应中文名称 "工业时代2"
                        </div>
                    </div>

                    <div class="form-row">
                        <label>适用版本 *</label>
                        <select>
                            <option value="">请选择适用的Minecraft版本</option>
                            <option>1.20.x</option>
                            <option>1.19.x</option>
                            <option>1.18.x</option>
                            <option>1.17.x</option>
                            <option>1.16.x</option>
                            <option>更早版本</option>
                        </select>
                        <div class="form-hint">
                            请选择模组支持的主要Minecraft版本，多个版本用逗号分隔。
                        </div>
                    </div>

                    <div class="form-row">
                        <label>模组简介 *</label>
                        <textarea placeholder="请简要介绍模组的核心功能和特色（100-500字）"></textarea>
                        <div class="form-hint">
                            简介应包含模组的核心玩法、特色内容，避免过于简略或冗余。
                        </div>
                    </div>

                    <div class="form-actions">
                        <button class="btn-cancel">取消</button>
                        <button class="btn-confirm">保存</button>
                    </div>
                </div>

                <!-- 编辑器 -->
                <div class="editor-toolbar">
                    <button>撤销</button>
                    <button>重做</button>
                    <button>加粗</button>
                    <button>斜体</button>
                    <button>链接</button>
                    <button>图片</button>
                    <button>代码</button>
                    <button>插入表格</button>
                    <button>插入代码</button>
                </div>
                <textarea class="editor-content" placeholder="在此输入模组详细介绍..."></textarea>

                <!-- 预览盒子 -->
                <div class="preview-box">
                    <div class="preview-title">实时预览</div>
                    <div class="preview-content">
                        <p>（输入内容后将在此显示预览效果）</p>
                    </div>
                </div>

                <!-- 规则提示 -->
                <div class="notice" style="margin-top: 10px;">
                    关于添加模组第三方下载源（如：网盘）的限制：<br>
                    1. 模组作者可以在“相关链接”中为自己的模组添加下载地址，但要在备注中声明“由作者提供的下载地址”，如有提取码，需一同添加。<br>
                    2. 在已经得到作者授权，允许将下载地址发布至MC百科的情况下，或是MC百科的分发行为符合作者指定的协议时，可以将截图证明发送至<a href="#">下载授权帖</a>内等待上传，无需在正文或链接中添加。
                </div>
            </div>

            <!-- 扩展信息 tab -->
            <div class="tab-content extend">
                <p class="notice">在此填写模组的扩展信息（如：特色玩法、兼容性说明等）</p>

                <!-- 扩展信息表单盒子 -->
                <div class="form-box">
                    <div class="form-row">
                        <label>模组特色</label>
                        <textarea placeholder="详细描述模组的独特玩法、机制或内容"></textarea>
                    </div>
                    <div class="form-row">
                        <label>兼容性说明</label>
                        <textarea placeholder="说明该模组与其他主流模组的兼容性情况"></textarea>
                    </div>
                    <div class="form-row">
                        <label>已知问题</label>
                        <textarea placeholder="记录模组的已知bug或问题"></textarea>
                    </div>
                    <div class="form-actions">
                        <button class="btn-cancel">取消</button>
                        <button class="btn-confirm">保存</button>
                    </div>
                </div>

                <textarea class="editor-content" placeholder="在此输入扩展信息..."></textarea>
            </div>

            <!-- 官方信息 tab -->
            <div class="tab-content official">
                <p class="notice">在此填写模组的官方信息（如：官网、作者社交平台等）</p>

                <!-- 官方信息表单盒子 -->
                <div class="form-box">
                    <div class="form-row">
                        <label>作者/团队 *</label>
                        <input type="text" placeholder="模组的开发作者或团队名称">
                    </div>
                    <div class="form-row">
                        <label>官方网站</label>
                        <input type="text" placeholder="模组的官方网站地址">
                    </div>
                    <div class="form-row">
                        <label>开源地址</label>
                        <input type="text" placeholder="GitHub/Gitee等开源仓库地址">
                    </div>
                    <div class="form-row">
                        <label>更新日志地址</label>
                        <input type="text" placeholder="官方更新日志页面地址">
                    </div>
                    <div class="form-actions">
                        <button class="btn-cancel">取消</button>
                        <button class="btn-confirm">保存</button>
                    </div>
                </div>

                <textarea class="editor-content" placeholder="在此输入官方信息..."></textarea>
            </div>
        </div>
    </div>
</section>

<!-- 底部 -->
<footer id="footer">
    <script>$("#footer").load('publicPage/footer.html')</script>
</footer>

<!-- 选项卡交互 -->
<script>
    $(function(){
        // 选项卡切换
        $('.tab-nav li').click(function(){
            const tab = $(this).data('tab');
            $('.tab-nav li').removeClass('active');
            $(this).addClass('active');
            $('.tab-content').removeClass('active');
            $(`.tab-content.${tab}`).addClass('active');
        });

        // 实时预览功能
        $('.editor-content').on('input', function() {
            const content = $(this).val();
            $(this).closest('.tab-content').find('.preview-content').html(content);
        });
    });
</script>
</body>
</html>
